<template>
  <div class="comments">
    <Myhead>业主评价</Myhead>

    <ul class="list">
      <li>
        <div class="top">
          <span><i class="iconfont icon-user"></i>x*h</span>
          <span>2016-05-19</span>
        </div>
        <div class="bottom">
          这篇文章很实用，正在装修，刚好可以用来参考一下。
        </div>
      </li>
      <li>
        <div class="top">
          <span><i class="iconfont icon-user"></i>x*h</span>
          <span>2016-05-19</span>
        </div>
        <div class="bottom">喜欢这篇文章很实用。</div>
      </li>
      <li>
        <div class="top">
          <span><i class="iconfont icon-user"></i>x*h</span>
          <span>2016-05-19</span>
        </div>
        <div class="bottom">
          这个设计师为人和随和，很喜欢他。画图也很仔细，暂时就这些。
        </div>
      </li>
      <li>
        <div class="top">
          <span><i class="iconfont icon-user"></i>x*h</span>
          <span>2016-05-19</span>
        </div>
        <div class="bottom">
          设计风格简约大气，人很热情，沟通很耐心，极力推荐。
        </div>
      </li>
      <li>
        <div class="top">
          <span><i class="iconfont icon-user"></i>x*h</span>
          <span>2016-05-19</span>
        </div>
        <div class="bottom">空间利用合理，设计风格很喜欢。</div>
      </li>
      <li>
        <div class="top">
          <span><i class="iconfont icon-user"></i>x*h</span>
          <span>2016-05-19</span>
        </div>
        <div class="bottom">
          这个设计师为人和随和，很喜欢他。画图也很仔细，暂时就这些。
        </div>
      </li>
    </ul>
     <section class="page font-normal flex">
      <a href="" class="bg-white">上一页</a>
      <div>1/30</div>
      <a href="" class="bg-green">下一页</a>
    </section>
  <Myfoot></Myfoot>
  </div>
</template>

<script>
import Myhead from "../components/Myhead.vue";
import Myfoot from '@/components/Myfoot'
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {},
  components: {
    Myhead,
    Myfoot
  },
};
</script>

<style lang='scss' scoped>
.comments {
  width: 100%;
  height: 1000px;
  background-color: #fff;
  .list {
    width: 100%;
    margin-top: 20px;
    li {
      border-top: 1px solid #eee;
      padding-top: 20px;
      padding-left: 10px;
      .top {
        color: #999;
        font-size: 22px;
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        .iconfont {
          width: 30px;
          height: 30px;
          padding: 5px;
          background-color: #dcdcdc;
          color: #fff;
          border-radius: 50%;
        }
      }
      .bottom {
        margin-top: 30px;
        margin-bottom: 20px;
        font-size: 20px;
        padding: 0 10px;
      }
    }
  }
}
.page.flex {
  width: 95%;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  display: flex;
  margin: 20px auto;
  background-color: #fff;
  .bg-white {
    background-color: #39c894;
    color: #fff;
  }
  div {
    width: 100px;
    text-align: center;
    color: black;
    background-color: #fff;
  }
}
.bg-green {
  background: #39c894;
  color: #fff;
}
.flex a,
.flex li {
  width: 100%;
  display: inline-block;
  flex: 1;
  text-align: center;
}
.foot-tips {
  background: #fff;
}
.footer-nav  {
  padding: 0.3rem;
  margin-top: 0.3rem;
  background: #fff;
  font-size: 14px;
  text-align: center;
  color: #999;
}
</style>
